<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="/kissy/src/css/assets/dpl/base.css" rel="stylesheet"/>
    <link href="/kissy/build/date/picker/assets/dpl.css" rel="stylesheet"/>
</head>
<body>
<h1>date/popup-picker</h1>

<div class="container">
    <input id="t"/>
    <button id="popup">弹出</button>
</div>

<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use('node,date/popup-picker,date/format', function (S, Node, PopupDatePicker, DateFormat) {
        var $ = Node.all,
                dateFormat = DateFormat.getDateInstance(DateFormat.Style.LONG),
                picker,
                t = $('#t');

        $('#popup').on('click', showPicker);

        function showPicker(e) {
            e.preventDefault();
            if (!picker) {
                picker = createPicker();
            }
            if (t.val()) {
                var val;
                try {
                    val = dateFormat.parse(t.val());
                    picker.set('value', val);
                } catch (ex) {
                }
            }
            picker.set('align', {
                node: t,
                points: ['bl', 'tl']
            });
            picker.show();
            picker.focus();
        }

        function createPicker() {
            picker = new PopupDatePicker({
                shim:true
            });
            picker.on('blur', function () {
                picker.hide();
            });
            picker.on('select', function (e) {
                if (e.value) {
                    t.val(dateFormat.format(e.value));
                } else {
                    t.val('');
                }
                t[0].focus();
            });
            return picker;
        }

        t.on('keydown', function (e) {
            if (e.keyCode == Node.KeyCode.DOWN) {
                showPicker(e);
            }
        });
    });
</script>
</body>
</html>